{include file="public/header"}
		<style type="text/css">
			
			.mainPage .contentBoxs .boxs1{
				width: 100%;
				height: auto;
				background-color: #fff;
				border-radius: 10px;
				height: auto;
				margin-top: 10px;
				padding-bottom: 0.8rem;
			}
			.mainPage .contentBoxs .boxs1 .titleBoxs{
				width: 100%;
				height: 1.3rem;
				line-height: 1.3rem;
				font-size: 0.5rem;
				color: #2E3192;
				text-align: center;
				letter-spacing: 4px;
				position: relative;
			}
			.mainPage .contentBoxs .boxs1 .titleBoxs:after{
				content: "";
				width: 76%;
				height: 1px;
				position: absolute;
				left: 13%;
				bottom: 0;
				background-color: #E6E6E6;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs{
				width: 76%;
				height: auto;
				box-sizing: border-box;
				margin: auto;
				padding: 20px 0;
			}
			.bxkBox{
				width: 100%;
				height: auto;
				/*background:url(/public/static/mobile/image/warrantyCardBg.jpg) no-repeat;*/
				background:url(/uploads/card/bg_img2/{$card_record.bg_img2}) no-repeat;
				background-size: 100% 100%;
				margin-top: 10px;
				/* padding: 50px 20px; */
				padding: 0.7rem 0.4rem;
				box-sizing: border-box;
			}
			.bxkBox .rowsBox1{
				width: 100%;
				height: auto;
				display: flex;
				padding: 0.2rem 0;
				position: relative;
			}
			.bxkBox .rowsBox1 .leftTab{
				flex: none;
				width: 1.9rem;
				height: 0.7rem;
				line-height: 0.7rem;
				font-size: 0.3rem;
				text-align: justify;
				text-align-last: justify;
				color: #00a2df;
			}
			.bxkBox .rowsBox1 .leftTab:after{
				content: '';
		        display: inline-block;
		        width: 100%;
			}
			.bxkBox .rowsBox1 .rightBoxs{
				flex: 1;
				width: calc(100% - 1.8rem);
				height: auto;
				min-height: 0.7rem;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #00a2df;
				font-size: 0.27rem;
				color: #00a2df;
				padding-left: 3px;
				box-sizing: border-box;
				word-break:break-all;

			}
			.bxkBox .rowsBox1 .btns{
				position: absolute;
				top: 50%;
				right: 0;
				font-size: 0.24rem;
				background-color: #00a2df;
				padding: 0.05rem 0.1rem;
				border-radius: 0.1rem;
				color: #Fff;
				height: 0.34rem;
				line-height: 0.34rem;
				margin-top: -0.32rem;
				width: 0.5rem;
				text-align: center;
			}
			/* .bxkExplain{
				width: 100%;
				height: auto;
				padding: 50px 5px;
				box-sizing: border-box;
			} */
			.bxkExplain{
				width: 100%;
				min-height: 600px;
				height: auto;
				/*background:url(/public/static/mobile/image/warrantyCardBg.jpg) no-repeat;*/
			    background:url(/uploads/card/bg_img2/{$card_record.bg_img2}) no-repeat;
				background-size: 100% 100%;
				margin-top: 10px;
				/* padding: 50px 20px; */
				padding: 0.7rem 0.4rem;
				box-sizing: border-box;
				color: #00a2df;
				margin-top: 1rem;
			}
			.bxkExplain .titleBoxs1{
				width: 100%;
				height: auto;
				text-align: center;
				font-size: 0.4rem;
				font-weight: bold;
				letter-spacing: 2px;
				padding: 0.1rem 0;
			}
			.bxkExplain .titleBoxs2{
				width: 100%;
				height: auto;
				text-align: center;
				font-size: 0.28rem;
				font-weight: bold;
				padding: 0.1rem 0;
			}
			.bxkExplain .contentBoxs2{
				width: 100%;
				height: auto;
				padding: 0.25rem 0;
			}
			.bxkExplain .contentBoxs2 .texts1{
				width: 100%;
				height: auto;
				font-size: 0.32rem;
				font-weight: bold;
				text-align: justify;
				padding: 0.3rem 0 0.05rem 0;
			}
			.bxkExplain .contentBoxs2 .texts2{
				width: 100%;
				height: auto;
				font-size: 0.3rem;
				text-align: justify;
				padding: 0.05rem 0;
				box-sizing: border-box;
			}
			.bxkExplain .contentBoxs2 .texts3{
				width: 100%;
				height: auto;
				font-size: 0.28rem;
				text-align: justify;
				padding: 0.05rem 0 0.05rem 0.2rem;
				box-sizing: border-box;
			}
			
			

			.allBoxs{
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
				position: fixed;
				top: 0;
				left: 0;
				z-index: 5;
				display: flex;
				align-items: center;
			}
			.allBoxs .centerBoxss{
				width: 70%;
				height: auto;
				background-color: #fff;
				min-height: 80px;
				align-items: center;
				margin: auto;
				border-radius: 0.2rem;
				padding: 0.1rem 0.4rem;
				box-sizing: border-box;
			}
			.allBoxs .centerBoxss .snlist{
				width: 100%;
				height: auto;
				font-size: 0.28rem;
				border-bottom: 1px solid #ddd;
				padding: 0.28rem 0;
			}
			/* .allBoxs .centerBoxss .snlist:first-of-type{
				border: 0;
			} */
			.allBoxs .centerBoxss .closeBox{
				width: 100%;
				height: auto;
				font-size: 0.3rem;
				padding: 0.25rem 0;
				text-align: center;
				margin-top: 0.2rem;
				color: #ff4d4d;
			}
			@media screen and (max-width: 370px) {
				.bxkBox .rowsBox1 .btns{
					width: 0.7rem;
				}
				.bxkBox .rowsBox1 .rightBoxs{
					font-size: 0.25rem;
				}
			}


		</style>
	
		<div id="index">
			
			<div class="mainPage">
				<div class="contentBoxs">
					<div class="bgBox" :style="{minHeight: winHeight}"></div>
					<div style="position: relative;z-index: 8;">
						<div class="headGoBackBox">
							<div class="backBtn" @click="goBack">
								<div class="goBackI"><img src="/public/static/mobile/image/goBackIcon.png" style="width: 100%;"></div>
								<div class="goBackT">返回</div>
							</div>
							<div style="flex: 1;"></div>
						</div>
                        {include file="public/logobox"}
						<div class="boxs1" style="padding: 10px 5px;box-sizing: border-box;">
							<div class="titleBoxs">{$card_record.card_title}</div>
							<div class="bxkBox">
								<div class="rowsBox1">
									<div class="leftTab">保修卡编号：</div>
									<div class="rightBoxs">{{datas.bianhao}}</div>
								</div>
								<div class="rowsBox1">
									<div class="leftTab">单位：</div>
									<div class="rightBoxs">{{datas.com}}</div>
								</div>
								<div class="rowsBox1">
									<div class="leftTab">联系人：</div>
									<div class="rightBoxs">{{datas.user}}</div>
								</div>
								<div class="rowsBox1">
									<div class="leftTab">电话：</div>
									<div class="rightBoxs">{{datas.phone}}</div>
								</div>
								<div class="rowsBox1">
									<div class="leftTab">手机：</div>
									<div class="rightBoxs">{{datas.mobile_phone}}</div>
								</div>
								<div class="rowsBox1">
									<div class="leftTab">电子邮件：</div>
									<div class="rightBoxs">{{datas.email}}</div>
								</div>
								<div class="rowsBox1">
									<div class="leftTab">产品型号：</div>
									<div class="rightBoxs">{{datas.model}}</div>
								</div>
								<div class="rowsBox1">
									<div class="leftTab">产品序列号：</div>
									<div class="rightBoxs"  v-if="allSn == ''">{{sn}}</div>
									<div class="rightBoxs" style="padding-right: 0.9rem;" v-if="allSn != ''">{{sn}}</div>
									<div class="btns" @click="viewAllSn" v-if="allSn != ''">查看</div>
								</div>
								<div class="rowsBox1">
									<div class="leftTab">保修期限：</div>
									<!-- <div class="rightBoxs">壹年(含电话支持)</div> -->
									<div class="rightBoxs">{{datas.endtime}}</div>
								</div>
							</div>
							<div class="bxkExplain">
									<!-- <img src="/public/static/mobile/image/warrantyText.png" class="imgs"/> -->
								{$card_record.card_desc}
							
								<!-- <div class="titleBoxs1">保修说明</div>
								<div class="contentBoxs2">
									<div class="texts1">一、产品保修政策</div>
									<div class="texts2">1、用户请妥善保存本保修卡及购机时所开具的国家税务局标准发票。在维修时必须出示以上凭证作为保修依据。为保障用户权益，用户务必自购机之日起十五日内将填写完整的用户反馈记录表寄回本公司。</div>
									<div class="texts2">2、雷迪产品的保修起始日期为发票标明的购机日期。用户在保修期申请免费保修服务时，需出示有效的购机发票、保修卡。维修结束后，请妥善保存维修中心签字、认可维修记录，以备查询。</div>
									<div class="texts2">3、雷迪产品保修的服务方式为送修服务，即用户需将机器送到附近的雷迪公司维修中心进行维修。</div>
									<div class="texts2">4、经雷迪维修中心维修的机器，在原保修期内继续享受雷迪提供的保修服务。</div>
									<div class="texts2">5、已过保修期的仪器，经维修后凭维修收费发票享有同类故障保修期三个月。</div>
									<div class="texts2">6、维修后更换下来的损坏件归雷迪有限公司所有。</div>
									<div class="texts1">二、产品保修例外</div>
									<div class="texts2">1.保修不包括下列情况：</div>
									<div class="texts3">a、因擅自拆机修理、改装、滥用、人为造成的损坏。</div>
									<div class="texts3">b、用户须严格按照产品操作说明书进行操作，因用户错误操作或在非产品所规定的工作环境下（如电压异常等）使用造成的故障或损坏。</div>
									<div class="texts3">c、因用户保管不当（如液体渗入等）而造成的故障和损害。</div>
									<div class="texts3">d、消耗材料（如：充电电池、电池、外壳和接插销部件的自然消耗、磨损及老化）。</div>
									<div class="texts3">e、自然灾害造成的损坏。</div>
									<div class="texts2">2、本保修条款仅适用于中华人民共和国大陆范围内（不包括香港、澳门特别行政区和台湾地区）。</div>
									<div class="texts1">限制说明</div>
									<div class="texts2">3、除本保修条款明确承若的责任外，雷迪公司在任何情况下，均不对其它直接、间接、特殊、附带或继发性损害承担任何责任，无论是基于合同，过失或其它法律理论以及无论是否被告知有发生此类损害之可能。</div>
								</div>
								<div class="titleBoxs2">本条款的解释权归微脉公司所有</div> -->
							</div>
						</div>
						{include file="public/footerbox"}
					</div>
				</div>
			</div>

			<!-- 查看全部序列号弹窗 -->
			<div class="allBoxs" v-if="allSnPopup">
				<div class="centerBoxss">
					<div class="snlist">序列号1：{{sn}}</div>
					<div class="snlist" v-for="(item,index) in allSn">序列号{{index+2}}：{{item}}</div>
					<!-- <div class="snlist">序列号3：{{allSn[1]}}</div> -->
					<div class="closeBox" @click="viewAllSn">关闭</div>
				</div>
			</div>


		</div>

	
<script type = "text/javascript">
var real_sn="{$real_sn}";
	new Vue({
	  	el: '#index',
	  	data: function () {
		  	return {
		  		winHeight:document.documentElement.clientHeight+"px",
		    	sn:"",
				real_sn:real_sn,
				datas:[],
				details:'',

				allSnPopup:false,
				allSn:[],
		  	}
	  	},
		created(){
			var _this=this;
			// 获取上一页面的参数
			var sn = decodeURI(window.location.href.split("?")[1]);
			_this.sn=sn.slice(3)
		},
	  	//页面加载需要执行的方法
	  	mounted:function(){
        	var _this=this;
			_this.getData();
			_this.getAllSn();
       },
	  	methods: {
			  //   返回
			goBack(){
				window.history.back(-1); 
			},
	  		// 获取页面数据
			getData:function(){
				var _this=this;
				var sn=_this.real_sn;
				axios.get('/api/mobile/getCard', {
					params: { sn: sn }
				})
				.then(function (res) {
					console.log(res);
					_this.datas=res.data.info;
					
				}).catch(function (error) {
					console.log(error);
				});
				//获取保修卡详情
				// axios.get('/api/mobile/get_card_desc', {
				// 	//params: { sn: sn }
				// })
				// .then(function (res) {
				// 	console.log(res);
				// 	_this.details=res.data.data;
					
				// }).catch(function (error) {
				// 	console.log(error);
				// });
			},
			// 点击查看全部序列号
			viewAllSn:function(){
				this.allSnPopup=!this.allSnPopup;
			},
			// 获取所有的sn
			getAllSn:function(){
				var _this=this;
				// console.log( _this.sn)
				axios.get('/api/mobile/get_namebysn', {
					params: { sn: _this.real_sn }
				})
				.then(function (res) {
					// console.log(res);
					if(res.data.data.sn){
						var s = res.data.data.sn;
						_this.allSn=s.split(",");
					}else{
						_this.allSn=[];
					}
				}).catch(function (error) {
					console.log(error);
				});
			},
	  		
	  	},
	})
</script>
{include file="public/footer"}
